<template>
	<div>
		<el-dialog
			v-model="showDialog"
			title="消息详情"
			width="800px"
			draggable
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
		>
			<div>
				<div class="title">
					{{ props.detial.title }}
				</div>
				<Editor style="height: 500px" class="editor-content'" v-model="props.detial.content" @on-created="handleCreated" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="read()" :disabled="countDown != 0" type="primary">我已阅读 {{ countDown || "" }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { onMounted, shallowRef, ref, computed, watch } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor } from "@wangeditor/editor-for-vue";
import { constraintCreated } from "@/api/modules/message";

import { AuthStore } from "@/stores/modules/auth";
const emit = defineEmits(["getShow"]);

const authStore = AuthStore();
const timer = ref<Number | null>(null);
const countDown = ref(0);
const props = defineProps<{
	showDialog: boolean;
	detial: any;
}>();
const showDialog = computed({
	get() {
		return props.showDialog;
	},
	set() {}
});
watch(showDialog, () => {
	if (showDialog.value) {
		if (timer.value == null) {
			countDown.value = Number(authStore.noReadList[0].second);
			console.log(countDown.value);
			if (countDown.value) {
				timer.value = window.setInterval(() => {
					countDown.value--;
					if (countDown.value <= 0) {
						if (timer.value) window.clearInterval(timer.value as number);
						timer.value = null;
					}
				}, 1000);
			}
		}
	}
});
// 富文本 DOM 元素
const editorRef = shallowRef();

// 实列化编辑器
const handleCreated = (editor: any) => {
	editorRef.value = editor;
	editorRef.value.disable();
};

onMounted(() => {});
const read = () => {
	constraintCreated({
		id: props.detial.id
	}).then(() => {
		authStore.getNoReadList();
		emit("getShow");
	});
};
</script>

<style lang="scss" scoped>
.title {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 20px;
}
/* 富文本组件禁用样式 */
.editor-disabled {
	cursor: not-allowed !important;
}
</style>
